<template>
  <div class="photolist">
      <div class="photo_title">
          <div class="photo_title_list" :class="[headerid ==item.id?'photo_tl_hover':'']" v-for="(item,index) in headermessage" :key="index" @click="hbutton(item.id)">{{item.title}}</div>
      </div>
      <router-link :to="'/home/phonedetail/' + item.id" tag="div" class="picture" v-for="(item,index) in images" :key="index">
          <img class="picture_img" v-lazy="item.img_url" alt="">
          <div class="picture_title">{{item.title}}</div>
      </router-link>
  </div>
</template>

<script>
export default {
    name:'photolist',
    data(){
        return{
            headermessage:[],
            headerid:0,
            images:[]
        }
    },
    methods:{
        getheader(){
            this.$axios.get('http://www.liulongbin.top:3005/api/getimgcategory').then((res) => {
                console.log(res);
                if(res.data.status == 0){
                    res.data.message.unshift({title:"全部",id:0});
                    this.headermessage = res.data.message;
                }
                
            })
        },
        hbutton(id){
            this.headerid=id;
            this.$axios.get('http://www.liulongbin.top:3005/api/getimages/' + id).then((res) => {
                console.log(res);
                if(res.data.status == 0){
                    this.images = res.data.message;
                }
                console.log(this.images);
            })
        }
    },
    created(){
        this.getheader();
        this.hbutton(0);
    }
}
</script>

<style scoped>
    .photo_title{
        width:100%;
        height: 44px;
        display: flex;
        flex-direction: row;
        overflow: hidden;
        overflow-x: auto;
        border-bottom: 0.01rem solid #e2e2e2;
    }
    .photo_title_list{
        width:100px;
        line-height: 44px;
        white-space: nowrap;
        flex-shrink: 0;
        text-align: center;
    }
    .photo_tl_hover{
        color:#26a2ff;
    }
    .picture{
        width:calc(100% - 20px);
        height: 300px;
        margin-top:6px;
        position: relative;
    }
    .picture_img{
        width:100%;
        margin-left:10px;
        height: 100%;
        background-color: #999;
    }
    .picture_title{
        width:100%;
        padding:0 5px;
        color:#FFF;
        font-size:16px;
        position: absolute;
        left:0;
        bottom:6px;
        font-weight: bold;
        text-align: center;
    }
</style>